<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		/* order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 */
		.contain {
			background-color: antiquewhite;
			display: flex;
		}
	</style>
</head>

<body>
	<div class="contain">
		<div style="width: 100px; height: 100px; background-color: #6495ED; order: 3;">1</div>
		<div style="width: 100px; height: 200px; background-color: #ADFF2F;order: 1;">2</div>
		<div style="width: 100px; height: 300px;background-color: #B8860B;order: -1;">3</div>
		<div style="width: 100px; height: 400px; background-color: #FFF0F5;order: 2;">4</div>
	</div>
</body>

</html>